<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong>{{num}}</strong></span>
		<ul class="filters">
			<li>
				<a :class="{selected:selectType === 'all'}" 
				@click="change('all')"
				href="javascript:;">全部</a>
			</li>
			<li>
				<a :class="{selected:selectType === 'active'}" 
				@click="change('active')"
				href="javascript:;">未完成</a>
			</li>
			<li>
				<a :class="{selected:selectType === 'complete'}" 
				@click="change('complete')"
				href="javascript:;">已完成</a>
			</li>
		</ul>
		<button class="clear-completed" @click="delFn" v-show="isShow">清除已完成</button>
	</footer>
</template>

<script>
	export default {
		props:['arr'],
		computed:{
			num(){
		return	this.arr.filter(item => !item.isDone).length
			},
			isShow(){
				return this.arr.length !== 0
			}
		},
		methods:{
			delFn(){
				this.$emit('dlt')
			},
				change(type){
			this.selectType = type
			this.$emit('changeType',type)
		}
		},
		data(){
			return{
				selectType:'all'
			}
		},
	
	}
</script>
